<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form>
    用户名：<input type="text" name="username"/><br/>
    密码：<input type="password" name="password"/><br/>
    自我介绍：<textarea name="introduction"></textarea><br/>
    <!--  绑定文件上传方法 当文件选择成功后 即可上传到服务器  -->
    头像：<input type="file" onchange="upFile()" id="file" name="file"><br/>
    <img id="img" src=""/><br/>
    <button type="button">提交</button>
</form>

<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.14/assets/js/vendor/jquery.min.js"></script>
<script type="text/javascript">
    function upFile() {
        var file = $("#file")[0].files[0];
        var myForm = new FormData();//必须使用FormData表达上传数据
        myForm.append("file", file);
        $.ajax({
            method: "post",
            url: "./upload.do",
            data: myForm,
            processData: false,//禁止类型转换//必须false才会避开jQuery对 formdata 的默认处理
            contentType: false,//必须false才会自动加上正确的Content-Type
            dataType: "text",
            success: function (data) {
                console.log(data);
                $('img').attr('src', '/1209/upload/' + data);
            },
            error: function (err) {
                console.log("error：" + err);
            }
        });
    }
</script>
</body>
</html>